<template>
  <div>
    select框的使用
    <WSelect :options="selectList"
             v-model="selectValue"
             :remote="true"
             :remote-method="remote"
             @selChange="selChange">
    </WSelect>
    <div>
      <hr>
    </div>

    <hr>
    <div style="font-weight: bold;">simple-form的使用</div>
    <div style="color: orangered">把子组件的 form 实例传给了 父组件  用于表单验证等操作</div>
    <SimpleForm :ref-obj.sync="formOpts.ref"
                :formOpts="formOpts"
                :widthSize="2"
                @handleEvent="handleEvent">
      <template #wechat>
        <div style="display:flex;">
          <el-input v-model="formOpts.formData.wechat" placeholder="自定义插槽"></el-input>
        </div>
      </template>
      <template #accountType>
        <el-option
          v-for="(item,key) in formOpts.listTypeInfo.accountTypeList"
          :key="key"
          :label="item"
          :value="key"
        ></el-option>
      </template>
    </SimpleForm>
    <!--      <component is="">rrr</component>--> <!-- is值为空就不渲染-->
    <!--      <div>{{test(10,100)}}</div>-->
  </div>
</template>

<script>
  // import Winput from './components/input/src';
  // import WSelect from './components/select/src';
  // import WSearch from './components/search/src';
  import SimpleForm from './components/simple-form/src';
  import Tform from './components/form/src';
  import DatePicker from './components/date-picker/src';
  export default {
    name: "T",
    components:{
      // WSelect,
      // Winput,
      // WSearch
      SimpleForm,
      Tform,
      DatePicker
    },
    created() {

    },
    mounted() {

    },
    computed:{
      /*计算属性传参 ☆☆☆☆☆*/
      test(){
        return (b,c)=>{
          return b+c
        }
      }
    },
    data(){

      // this.$options.data().属性名 可以获取原data里的属值 ☆☆☆☆☆
      return{

        // selectValue:["安徽"],
        selectValue:"安徽",
        selectList:[
          {label: "安徽",value:"安徽"},
          {label: "安徽2",value:"安徽2",disabled:true},
          {label: "安徽3",value:"安徽3",disabled:true},
          {label: "江苏",value:"江苏"},
          {label: "江苏1",value:"江苏1"},
          {label: "江苏2",value:"江苏3"},
          {label: "江苏3",value:"江苏2"},
          {label: "江苏32",value:"江苏23"},
          {label: "江苏323",value:"江苏233"},
        ],

        winput:"",
        winput2:"",
        formOpts: {
          // labelPosition: 'left', // right top
          ref: null,
          formData: {
            id: `${Math.floor(Math.random() * 10 + 1)}`, // *唯一ID
            account: '', // *用户账号
            password: '', // *用户密码
            name: '', // *用户昵称
            sex: '', // *性别: 0:男 1:女
            hobby: [], // *爱好: 0:男 1:女
            phone: '', // 手机号码
            createDate: '', // 创建时间
            valDate: '', // el日期选择范围
            wechat: '', // 微信
            qq: '', // qq
            accountType: '', // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
            email: '', // 邮箱
            desc: '', // 描述
            number: '', // 计算器
            status: '' // *状态: 0：停用，1：启用(默认为1)',
          },
          fieldList: [
            { label: '账号', value: 'account', type: 'input', comp: 'el-input', },
            { label: '密码', value: 'password', type: 'password', comp: 'el-input' },
            { label: '状态', value: 'status', type: 'select-arr', comp: 'el-select', list: 'statusList', arrLabel: 'label', arrKey: 'value' },
            { label: '昵称', value: 'name', type: 'input', comp: 'el-input' },
            { label: '性别', value: 'sex', type: 'select-arr', comp: 'el-select', list: 'sexList', bind: { disabled: false }, arrLabel: 'label', arrKey: 'value' },
            { label: '平台用户' ,value: 'accountType', type: 'select-obj', comp: 'el-select', list: 'accountTypeList', childSlotName: 'accountType' },
            { label: '爱好', value: 'hobby', type: 'checkbox', comp: 'el-checkbox-group', list: 'hobbyList',},
            { label: '手机号码', value: 'phone', type: 'input', comp: 'el-input', bind: { maxlength: 11 } },
            { label: '创建时间', value: 'createDate', type: 'datetime', bind: { valueFormat: 'yyyy-MM-dd HH:mm:ss' }, comp: 'el-date-picker' },
            {
              labelRender: () => {
                return (
                  <div class="label_render">
                    <div>element日期</div>
                    <el-tooltip >
                      <template slot="content">
                        <span>自定义label</span>
                      </template>
                      {/*<i class="el-icon-warning-outline" style="cursor: pointer;margin-right:2px;" />*/}
                    </el-tooltip>
                  </div>
                )
              },
              rules: { required: true, message: '请选择element日期', trigger: 'change' },
              value: 'valDate',
              type: 'datetimerange',
              comp: 'el-date-picker',
              bind: { rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期' , valueFormat: 'yyyy-MM-dd HH:mm:ss'}
            },
            { label: '微信', value: 'wechat', slotName: 'wechat', rules: { required: true, message: '请输入微信', trigger: 'blur' } },
            { label: 'QQ', value: 'qq', type: 'input', comp: 'el-input' },
            { label: '邮箱', value: 'email', type: 'input', comp: 'el-input' },
            { label: '计数器', value: 'number', type: 'inputNumber', bind: { controls: false, min: 2, max: 99 }, comp: 'el-input-number' },
            { label: '描述', value: 'desc', type: 'textarea', comp: 'el-input', className: 't-form-block' }
          ],
          // 相关列表
          listTypeInfo: {
            hobbyList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' },
              { label: '美剧', value: '2' },
              { label: '旅游', value: '3' },
              { label: '音乐', value: '4' }
            ],
            sexList: [
              /* { key: '女', value: 1 },
               { key: '男', value: 0 },
               { key: '女', value: 1 },
               { key: '男', value: 0 },*/
              { label: '女', value: 1 },
              { label: '男', value: 0 },
              { label: '未知', value: 0 },
            ],
            accountTypeList: {
              0: '手机用户',
              1: '论坛用户',
              2: '平台用户'
            },
            statusList: [
              { label: '启用', value: 1 },
              { label: '停用', value: 0 }
            ]
          },
          rules: {
            account: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
            phone: [
              { required: true, message: '请输入手机号码', trigger: 'blur' }
            ],
            sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
            hobby: [
              { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
            ]
          },
          operatorList: [
            { label: '提交', type: 'danger', fun: this.submitForm },
            { label: '重置', type: 'primary', fun: this.resetForm },
            { label: '清除校验', type: 'danger', fun: this.clearValidate }
          ],
        }
      }
    },
    methods:{
      // 获取权限
      selChange(val){
        console.log(val)
        console.log(this.selectValue)
      },
      remote(){
        console.log("远程搜索方法")
      },

      //form相关
      // 触发事件
      handleEvent (itemKey, itemValue) {
        console.log("itemKey:",itemKey)
        console.log("itemValue:",itemValue)
        console.log(this.formOpts.formData)
        // switch (type) {
        //   case 'checkbox':
        //     console.log('checkbox', val, type)
        //     break
        // }
      },
      // 提交form表单
      submitForm () {
        this.formOpts.ref.validate((valid) => {
          // console.log(88, valid)
          console.log("打印一下表单", this.formOpts.formData)
          if (valid) {
            console.log('提交最终数据', this.formOpts.formData)
          }else{
            return
          }

        })
      },
      // 重置form表单
      resetForm () {
        // console.log(this.$data.formOpts.formData)
        // console.log( this.$options.data().formOpts.formData) // 表单初始值

        Object.assign(this.$data.formOpts.formData, this.$options.data().formOpts.formData)
        // 清空校验
        this.formOpts.ref.clearValidate()
      },
      // 清除校验
      clearValidate () {
        this.formOpts.ref.clearValidate()
      }
    },
    watch:{

    },
    beforeDestroy() {

    }

  }
</script>

<style scoped lang="scss">

</style>


